import { useTemplateRef } from "vue";

//格式化聊天时间
function formatTime(date) {
  const now = new Date();
  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const yesterdayStart = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate() - 1
  );

  const hours = date.getHours();
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const formattedTime = `${hours}:${minutes}`;

  if (
    date >= todayStart &&
    date < new Date(todayStart.getTime() + 24 * 60 * 60 * 1000)
  ) {
    if (hours < 6) {
      return `凌晨 ${formattedTime}`;
    } else if (hours < 12) {
      return `上午 ${formattedTime}`;
    } else if (hours < 18) {
      return `下午 ${formattedTime}`;
    } else {
      return `晚上 ${formattedTime}`;
    }
  } else if (date >= yesterdayStart && date < todayStart) {
    if (hours < 6) {
      return `昨天 凌晨 ${formattedTime}`;
    } else if (hours < 12) {
      return `昨天 上午 ${formattedTime}`;
    } else if (hours < 18) {
      return `昨天 下午 ${formattedTime}`;
    } else {
      return `昨天 晚上 ${formattedTime}`;
    }
  } else {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");

    if (hours < 6) {
      return `${year}-${month}-${day} 凌晨 ${formattedTime}`;
    } else if (hours < 12) {
      return `${year}-${month}-${day} 上午 ${formattedTime}`;
    } else if (hours < 18) {
      return `${year}-${month}-${day} 下午 ${formattedTime}`;
    } else {
      return `${year}-${month}-${day} 晚上 ${formattedTime}`;
    }
  }
}

// 渲染聊天记录
function appendMessage(msg, position) {
  const messageDiv = document.createElement("div");
  const chatBox = document.querySelector(".chatBox");
  const className = position ? "message my_message" : "message frnd_message";

  const formattedTime = formatTime(new Date(msg.time));
  const messageText = document.createTextNode(msg.message);
  const timeText = document.createTextNode(formattedTime);

  const messageContent = document.createElement("p");
  messageContent.appendChild(messageText);
  messageContent.innerHTML += "<br /><span>";
  messageContent.appendChild(timeText);
  messageContent.innerHTML += "</span>";

  messageDiv.className = className;
  messageDiv.appendChild(messageContent);

  chatBox.appendChild(messageDiv);
}

// 渲染进入聊天室欢迎条目
function appendWelcome(msg) {
  const chatBox = document.querySelector(".chatBox");

  // 创建 <p> 标签
  const welcomeMsg = document.createElement("p");
  welcomeMsg.textContent = msg;
  welcomeMsg.className = "welcome";

  // 将 <p> 标签追加到 chatBox 中
  chatBox.appendChild(welcomeMsg);
}

//

// 自动滚动到底部的函数
function scrollToBottom(DOM) {
  // 如果聊天容器的高度小于或等于其滚动高度，则不需要滚动
  if (DOM.scrollHeight <= DOM.clientHeight) return;

  // 设置聊天容器的滚动位置为其最大值
  DOM.scrollTop = DOM.scrollHeight - DOM.clientHeight;
}

//搜索功能实现
function searchUserJoinList(myName, userJoinList, searchInput) {
  let searchResults = userJoinList.filter((item) => {
    let toName = myName === item.user1 ? item.user2 : item.user1;
    return toName.includes(searchInput);
  });

  return searchResults;
}

export default {
  formatTime,
  appendMessage,
  scrollToBottom,
  searchUserJoinList,
  appendWelcome,
};
